<template>
  <div class="ticactoe">
    <div style="font-size: 25px">{{ !round ? '我' : 'AI' }}的回合</div>
    <div>
      <el-radio-group v-model="offensive" @change="offensiveChange" size="large">
        <el-radio-button label="我先手"/>
        <el-radio-button label="AI先手"/>
      </el-radio-group>
    </div>
    <el-row :gutter="20" class="checkerboard">
      <div v-if="!gameStatus" class="noStart">
        {{ showText }}
      </div>
      <el-col :span="8" class="item" v-for="(item,i) in data.array" @click="()=>playerClick(i)">
        <span class="piece circle-breath-white" style="background-color:#ffffff" v-if="item===1"></span>
        <span class="piece circle-breath" style="background-color:#000000" v-else-if="item===2"></span>
        <span v-else></span>
      </el-col>
    </el-row>
    <div>
      <el-button @click="reset">{{ gameStatus ? '重新开始' : '开始游戏' }}</el-button>
    </div>
    <img style="width: 50%" src="http://122.51.217.103:8001/files/65951b9cffc4a0132f0eb3b9" alt="图片打开失败">
<!--    <iframe-->
<!--        id="iframeContainer"-->
<!--        name="iframePage"-->
<!--        src="http://localhost:8000/!/trading-desk"-->
<!--        frameborder="0"-->
<!--        width="70%"-->
<!--        height="700px"-->
<!--        scrolling="no"-->
<!--&gt;-->
<!--</iframe>-->
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const data = reactive({
  array: [0, 0, 0, 0, 0, 0, 0, 0, 0]
});
const offensive = ref('我先手')
const gameStatus = ref(false)
const round = ref(false)
const showText = ref('请点击开始游戏')

    // const onMessagessss= (e:any) => {
    //     const data = e.data;//转化为json
    //     console.log(data,'父页面data');
    // };
    // window.addEventListener('message', onMessagessss);

const winList = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6],
]

const step = ref(0)
// const data = ref(state.array)


const offensiveChange = () => {
  gameStatus.value = false
  showText.value = '请点击开始游戏'
}
const playerClick = (i:number) => {
  if (round.value) {
    return
  }
  round.value = true
  data.array[i] = 1;
  step.value = step.value++;
  const playerWin = gameOver(1)
  if (playerWin) {
    gameStatus.value = false
    showText.value = '你赢了'
    return
  }
  setTimeout(botNext, randNumber(2000,500))
}


const botNext = () => {
  console.log('botNext函数')
  if (step.value < 2 && !data.array[4]) {
    data.array[4] = 2
    round.value = false
    return;
  }
  const completed = defense(2, 2) || defense(1, 2)
  let botWin = gameOver(2)
  if (botWin) {
    gameStatus.value = false
    showText.value = '你输了'
    round.value = false
    return
  }
  !completed && chooseOne([0, 2, 6, 8])
  botWin = gameOver(2)
  if (botWin) {
    gameStatus.value = false
    showText.value = '你输了'
    round.value = false
    return
  }
  if (data.array.every(item => item)) {
    gameStatus.value = false
    showText.value = '平局'
    round.value = false
    return
  }
  round.value = false
}

const gameOver = (num:number) => {
  for (let i = 0; i < winList.length; i++) {
    if (data.array[winList[i][0]] === num && data.array[winList[i][1]] === num && data.array[winList[i][2]] === num) {
      return true
    }
  }
  // if (win) {
  //   console.log('游戏结束')
  // }
  return false
}

const reset = () => {
  data.array = [0, 0, 0, 0, 0, 0, 0, 0, 0]
  step.value = 0
  gameStatus.value = true
  if (offensive.value === 'AI先手') {
    round.value = true
    setTimeout(botNext, 1000)
  }
}

//有两个相连，去防御或进攻
const defense = (m: number, n: number): boolean => {
  let move = false
  const fn = (size: number[]) => {
    if (data.array[size[0]] === m && data.array[size[1]] === m && !data.array[size[2]]) {
      data.array[size[2]] = n;
      move = true
    } else if (data.array[size[0]] === m && data.array[size[2]] === m && !data.array[size[1]]) {
      data.array[size[1]] = n;
      move = true
    } else if (data.array[size[1]] === m && data.array[size[2]] === m && !data.array[size[0]]) {
      data.array[size[0]] = n;
      move = true
    }
  }
  for (let i = 0; i < winList.length; i++) {
    fn(winList[i])
    if (move) return move
  }
  return move
}

const randNumber = (max=1,min=0) => Math.floor(Math.random() * (max-min)+min);
//返回数组中的随机一个
const randomOne = (arr:any[]) => {
  return arr[Math.floor(Math.random() * arr.length)]
}

const chooseOne = (arr: number[]) => {
  const i = randomOne(arr)
  if (!data.array[i]) {
    data.array[i] = 2
    return
  } else {
    chooseOne(arr.filter(item => item !== i))
  }
}

</script>

<style scoped lang="scss">
.ticactoe {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.checkerboard {
  width: 300px;
  height: 300px;
  background-color: darkgrey;
  position: relative;

  .noStart {
    width: 100%;
    height: 100%;
    position: absolute;
    font-size: 40px;
    text-align: center;
    line-height: 300px;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.5);
  }

  .item {
    //width: 30%;
    height: 100px;
    border: 2px #00ffff solid;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;

    .piece {
      //transform: translateY(50%);
      //animation: donghua 2.4s infinite;
    }
  }
}

.circle-breath {
  //background: pink;
  box-shadow: 0 0 0 1px rgb(0, 0, 0, 0.1);
  height: 36px;
  width: 36px;
  border-radius: 50%;
  animation: donghua 2s;
  animation-timing-function: ease;
}

.circle-breath-white {
  //background: pink;
  box-shadow: 0 0 0 1px rgb(0, 0, 0, 0.1);
  height: 36px;
  width: 36px;
  border-radius: 50%;
  animation: donghua-white 2s;
  animation-timing-function: ease;
}

@keyframes donghua {
  0% {
    //transform: scale(0.60);
    transform: translateY(-300%) rotateX(90deg);
    /* 注意rgba中的a的设置 */
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0%);
  }
  10% {
    //transform: scale(0.60);
    transform: translateY(-200%) rotateX(90deg);
    /* 注意rgba中的a的设置 */
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0%);
  }
  20% {
    transform: translateY(-100%) rotateX(45deg);
    //transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0%);
  }

  30% {
    transform: translateY(0%) rotateX(0);
    //transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 60%);
  }

  60% {
    transform: translateY(0%);
    //transform: scale(1);
    box-shadow: 0 0 0 18px rgba(0, 0, 0, 0%);
  }

  100% {
    transform: translateY(0%);
    //transform: scale(0.60);
    box-shadow: 0 0 0 36px rgba(0, 0, 0, 0%);
  }
}
@keyframes donghua-white {
  0% {
    //transform: scale(0.60);
    transform: translateY(-300%) rotateX(90deg);
    /* 注意rgba中的a的设置 */
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0%);
  }
  10% {
    //transform: scale(0.60);
    transform: translateY(-200%) rotateX(90deg);
    /* 注意rgba中的a的设置 */
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0%);
  }
  20% {
    transform: translateY(-100%) rotateX(45deg);
    //transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0%);
  }

  30% {
    transform: translateY(0%) rotateX(0);
    //transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 60%);
  }

  60% {
    transform: translateY(0%);
    //transform: scale(1);
    box-shadow: 0 0 0 18px rgba(255, 255, 255, 0%);
  }

  100% {
    transform: translateY(0%);
    //transform: scale(0.60);
    box-shadow: 0 0 0 36px rgba(255, 255, 255, 0%);
  }
}
</style>